<template>
  <el-dialog
      v-model="computedDialogVisible"
      title="修改价格"
      width="30%"
  >
    <el-form label-width="120px">
      <el-form-item label="起步数">
        <el-input v-model="formData.first"></el-input>
      </el-form-item>
      <el-form-item label="起步价">
        <el-input-number v-model="formData.firstPrice" :precision="2" :step="0.1" :max="10"/>
      </el-form-item>
      <el-form-item label="续价单位">
        <el-input v-model="formData.renewal"></el-input>
      </el-form-item>
      <el-form-item label="续价">
        <el-input-number v-model="formData.renewalPrice" :precision="2" :step="0.1" :max="10"/>
      </el-form-item>
      <el-form-item label="结束数">
        <el-input v-model="formData.end"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea" v-model="formData.description"></el-input>
      </el-form-item>
      <el-form-item label="单价类型">
        <el-select v-model="formData.type" placeholder="请选择单价类型">
          <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="computedDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>

import {computed, reactive, ref, watch} from "vue";
import {UnitPrice} from "@/typings";
import {getUnit, saveUnit} from "@/api/post/unit";
import {ElMessage} from "element-plus";

const props = defineProps({dialogVisible: {type: Boolean, default: false}, id: {type: String, required: true}})
const emits = defineEmits(['update:dialog-visible', 'submit'])
let formData = ref<UnitPrice>({} as UnitPrice)
watch(() => props.id, (value, oldValue) => {
  console.log(props.id)
  getUnit(value).then((res) => {
    formData.value = res
  })
})

const typeList = [
  {label: '佣金', value: '佣金'},
  {label: '字数', value: '字数'},
  {label: '照片', value: '照片'},
  {label: '手写', value: '手写'},
  {label: '抽成', value: '抽成'}

]
let computedDialogVisible = computed({
  get: () => {
    return props.dialogVisible
  },
  set: (value) => {
    emits('update:dialog-visible', value)
  }
})

const handleConfirm = () => {
  saveUnit(formData.value).then(res => {
    if (res == true) {
      ElMessage.success({message: '修改成功'})
      computedDialogVisible.value = false
      emits('submit')
    }
  })
}
</script>

<style lang="scss" scoped>

</style>